import { Outlet, useLoaderData, Form, useSubmit } from 'react-router-dom'
import './contentList.scss'

import { Add } from '@icon-park/react'
import ContentListItem from '@renderer/components/ContentListItem'

export default function ContentList() {
  const contents: ContentType[] = useLoaderData()
  const submit = useSubmit()

  return (
    <main className="contentList-page">
      <div className="list">
        <Form>
          <div className="border-b px-3 flex justify-between items-center">
            <input
              name="searchWord"
              placeholder="搜索..."
              className="outline-none py-2  text-sm font-bold w-full"
              onChange={(e) => submit(e.target.form)}
            />
            <Add
              theme="outline"
              size="18"
              fill="#000"
              strokeWidth={2}
              onClick={() => submit(null, { method: 'POST' })}
              className="cursor-pointer"
            />
          </div>
        </Form>
        {contents.map((content) => (
          <ContentListItem key={content.id} content={content} />
        ))}
      </div>
      <div className="content">
        <Outlet />
      </div>
    </main>
  )
}
